<template>
  <div class="modal-form-container">
      <Row>
        <Col span="12">
          <div class="form-container">
            <vuescroll :ops="ops">
              <Form class="form" ref="info" :model="data" :rules="rules" :label-width="120">
                <FormItem :label="$t('NNqwsiYKNFh8WR5Mvlwed')" prop="name">
                  <Input v-model="data.name" />
                </FormItem>
                <FormItem :label="$t('81K1V1IGGHxPb42EVYt1M')" prop="address">
                  <Input v-model="data.address" />
                </FormItem>
                <!-- <FormItem :label="$t('-4voplKgX-6eLXhZ5SFaQ')" prop="type">
                  <Input v-model="data.type" />
                </FormItem> -->
                <FormItem :label="$t('jE688EYtIT7-N6CXSWl5L')" prop="tel">
                  <Input v-model="data.tel" />
                </FormItem>
                <FormItem :label="$t('Q58DQAm6oYtp3k-cvxlbn')" prop="manager">
                  <Input v-model="data.manager" />
                </FormItem>
                <FormItem :label="$t('MV-P1vHjPXG7_m9z2N7Zk')">
                  <Input v-model="data.scale" />
                </FormItem>
                <!-- <FormItem :label="$t('b_vZf8lLCYQPjgL7H8oNH')">
                  <Input v-model="data.pictures" />
                </FormItem> -->
                <FormItem :label="$t('M7vkNhYw26IERuJmxNbK-')">
                  <Select v-model="data.country">
                    <Option v-for="country in countries" :value="country.value" :key="country.value">{{ locale === 'zh-CN' ? country.label : country.ENLabel }}</Option>
                  </Select>
                </FormItem>
                <FormItem :label="$t('R50mHX0LambJk39x8cmq6')">
                  <Input
                    v-model="data.remark"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 5 }"
                  />
                </FormItem>
                <FormItem :label="$t('-I5CfrSiXKP-rpaBq-v31')">
                  <Input v-model="data.profitsharing" />
                </FormItem>
                <FormItem :label="$t('zdQp578sePlTr1mSxdEpb')">
                  <Input v-model="data.timezone" />
                </FormItem>
                <FormItem label="GPS-X">
                  <Input v-model="lng" disabled />
                </FormItem>
                <FormItem label="GPS-Y">
                  <Input v-model="lat" disabled />
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="save">{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button>
                  <Button style="margin-left: 8px" @click="close"
                    >{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button
                  >
                </FormItem>
              </Form>
            </vuescroll>
          </div>
        </Col>
        <Col span="12">
          <div id="station-map" class="allmap map-area"></div>
        </Col>
      </Row>
  </div>
</template>

<script>
import { addStation, updateStation } from '@/api/data2'
import { countries as COUNTRIES } from '@/config/countries'
import vuescroll from 'vuescroll'

export default {
  name: 'station_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    rules: Object,
    status: String,
    inModal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      bigImgShow: false,
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      lat: this.data.lat,
      lng: this.data.lng,
      countries: COUNTRIES
    }
  },
  computed: {
    locale () {
      return this.$store.state.locale
    }
  },
  watch: {
    bigImgShow (val) {
      if (val) {
        this.$emit('close')
      } else {
        this.$emit('open')
      }
    },
    'data.lat' (val) {
      this.lat = val
    },
    'data.lng' (val) {
      this.lng = val
    }
  },
  mounted () {
    this.renderMap()
  },
  methods: {
    renderMap () {
      const that = this
      // 百度地图API功能
      const map = new BMap.Map('station-map') // 创建Map实例
      map.centerAndZoom(new BMap.Point(112.119028, 32.013809), 12) // 初始化地图,设置中心点坐标和地图级别
      // 添加地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      )
      map.setCurrentCity('襄阳') // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      const geoc = new BMap.Geocoder()
      map.addEventListener('click', function (e) {
        console.log('============click map==========', e)
        map.clearOverlays()
        that.lat = e.point.lat
        that.lng = e.point.lng
        map.addOverlay(new BMap.Marker(e.point))
        // geoc.getLocation(pt, function(rs){
        //   const addComp = rs.addressComponents
        //   alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)
        // })
      })
      this.map = map
    },
    beforeUploadHandler (file) {
      // this.data.pictures = file
      console.log('============= file is:', file)
      // 通过FileReader把File转化为base64
      const reader = new FileReader()
      // 读出 base64
      reader.readAsDataURL(file)
      reader.onloadend = () => {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        this.data.pictures = reader.result
      }
      return false
    },
    handleView () {
      this.bigImgShow = true
    },
    handleRemove () {
      this.data.pictures = ''
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          // const formData = new FormData()
          // for (const key in this.data) {
          //   formData.append(key, this.data[key])
          // }
          // const res = await setFormData(formData)
          const obj = {
            operatorid: this.$store.state.user.operatorId,
            lat: this.lat,
            lng: this.lng
          }
          const { code, data, desc } =
            this.status === 'new'
              ? await addStation({ ...this.data, ...obj })
              : await updateStation({ ...this.data, ...obj })
          if (code == 200) {
            this.$emit('success', desc)
          } else {
            this.$emit('fail', desc)
          }
        } else {
          this.$Message.error(this.$t('fcmS3YBVNyvO3V68Qt3xl'))
        }
      })
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .form-container
    height 500px
    padding 0px
  .form
    margin 10px
  .map-area
    height 500px
</style>
